<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        showBack
      ></pageHeaderNew>
    </template>
    <div class="wrap">
      <main>
        <a-space
          class="table-header"
          style="justify-content: space-between; margin-bottom: 18px"
          fill
        >
          <a-input-search
            v-model="keyword"
            placeholder="请输入关键字"
            @press-enter="tableRef.loadData()"
          />
          <a-button
            type="primary"
            @click="
              router.push({
                name: 'EditAttendanceMachine'
              })
            "
          >
            新增考勤机
          </a-button>
        </a-space>
        <TableTurn :tableData="getTableData" ref="tableRef">
          <a-table-column :width="80">
            <template #title> 序号 </template>
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="设备名称"
          >
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="设备品牌"
          >
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="model"
            title="设备型号"
          >
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="sn"
            title="设备SN号"
          >
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="设备管理员(工号)"
          >
            <template #cell="{ record }">
              {{
                record?.managerInfo?.ctlValue?.filter(
                  ({ ctlCode }: any) =>
                    ctlCode === 'CDC80FC12D1DE43018D098E8322D0F966'
                )[0]?.ctlValue
                  ? record.managerInfo.ctlValue.filter(
                      ({ ctlCode }: any) =>
                        ctlCode === 'CDC80FC12D1DE43018D098E8322D0F966'
                    )[0]?.ctlValue
                  : '暂无'
              }}
            </template>
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="新增时间"
          >
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="操作"
          >
            <template #cell="{ record }">
              <a-tooltip content="编辑">
                <IconFont
                  type="icon-edit"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer'
                  }"
                  @click="edit(record)"
                />
              </a-tooltip>
              <a-tooltip content="删除" position="left">
                <a-popconfirm
                  content="是否确认删除该条数据?"
                  @ok="del(record.id)"
                >
                  <icon-font
                    type="icon-delete"
                    :size="26"
                    :style="{
                      cursor: 'pointer',
                      marginRight: '10px'
                    }"
                  />
                </a-popconfirm>
              </a-tooltip>
            </template>
          </a-table-column>
        </TableTurn>
      </main>
    </div>
  </ContentCard>
</template>
<script setup lang="ts">
import {
  GetMachineList,
  DelMachineList
} from '@/apis/attendance/base-setting/index';
import { useRouter } from 'vue-router';
const title = '考勤机管理';
const breadCrumb: string[] = [
  '考勤',
  '基础设置',
  '考勤设置',
  '打卡方案',
  '考勤机管理'
];
const show = ref(true);
const keyword = ref('');
const tableRef = ref();
const router = useRouter();

const isShow = () => {
  show.value = !show.value;
};
const getTableData = async (pageData: any) => {
  try {
    const res = await GetMachineList({ ...pageData, name: keyword.value });
    return res;
  } catch (error) {
    console.log(error);
    return [];
  }
};
const edit = (data: any) => {
  localStorage.setItem('machineData', JSON.stringify(data));
  router.push({
    name: 'EditAttendanceMachine'
  });
};
const del = async (id: number) => {
  try {
    await DelMachineList({ ids: [id] });
    tableRef.value.loadData();
  } catch (error) {
    console.log(error);
  }
};
// https://date.nager.at/api/v3/publicholidays/2023/cn
// https://date.appworlds.cn/year/2023
</script>
<style lang="less" scoped></style>
